<template>
  <a-modal
    :width="500"
    :visible="visible"
    :title="title"
    @cancel="onClose"
    @ok="onSubmit"
    ok-text="移除"
    :footer="removeType == 'view' ? null : undefined"
    :destroyOnClose="true"
    :confirmLoading="loading"
  >
    <a-alert type="warning" style="margin-bottom: 20px" v-if="removeType !== 'view'">
      <template #description>
        <p>无团队的招商专员将无法在佣金结算中计算佣金，已经结算的不受影响。</p>
      </template>
    </a-alert>
    <a-table
      :dataSource="dataList"
      :columns="columns"
      :pagination="false"
      :loading="tableLoading"
      :scroll="{ x: 'max-content',y: 460}"
      rowKey="id"
      :row-selection="rowSelection"
    >
      <template #bodyCell="{ text, record, index, column }">
        <template v-if="column.key === 'name'">
          <span>
              {{text || '--'}}
               <a-tag v-if="record.role == 1" color="blue" style="margin-left: 2px">招商经理</a-tag>
            </span>
        </template>
      </template>
    </a-table>
  </a-modal>

</template>
<script>
import {defineComponent, reactive, toRefs, computed, watch, createVNode} from "vue";
import {message, Modal} from "ant-design-vue";
import store from "../../../../store";
import request from "../../../../common/utils/request";
import _ from "lodash";
import {ExclamationCircleOutlined, FormOutlined} from "@ant-design/icons-vue";
export default defineComponent({
  name: "RemoveTeamPersonnel",
  props: {
    id: {
      type: [Number, String],
      default: 0,
    },
    visible: {
      type: Boolean,
      default: false,
    },
    removeType: {
      type: String,
      default: '',  // 空为删除
    }
  },
  components: {FormOutlined},
  setup(props, { emit }) {
    const state = reactive({
      tableLoading: false,
      loading: false,
      dataList: [],
      columns: [
        {
          title: "姓名",
          key: "name",
          dataIndex: "name",
        },
        {
          title: "手机号码",
          key: "tel",
          dataIndex: "tel",
        },
      ],
      selectedRowKeys: []
    });

    const onSelectedRowChange = (keys) => {
      state.selectedRowKeys = keys;
    };

    const rowSelection = computed(() =>
      props.removeType !== 'view'
        ? {
          selectedRowKeys: state.selectedRowKeys,
          onChange: onSelectedRowChange,
          getCheckboxProps: (record) => ({
            disabled: record.role == 1,
          })
        }
        : null
    );

    const title = computed(() => {
      return props.removeType == 'view' ? "查看人员" : "移除人员";
    });


    const onSubmit = () => {
      Modal.confirm({
        title: () => "提示",
        content: () => "确定要移除所选人员吗？",
        icon: () => createVNode(ExclamationCircleOutlined),
        okText: () => "确定",
        onOk() {
          state.loading = true;
          request.del("/org", "/business/customerTeam/removeUser", {ids:state.selectedRowKeys.join(',')}).then((res) => {
            message.success(res.msg || "移除成功!");
            emit("success");
          }).finally(() => {
            state.loading = false;
          });
        },
      });
    };


    const onClose = () => {
      emit("handleCancel");
    };

    const getDataList = () => {
      state.tableLoading = true;
      request.get("/org", "/business/customerTeam/teamUserIndex", {team_id: props.id}).then((res) => {
        state.dataList = res?.data || [];
      }).finally(() => {
        state.tableLoading = false;
      });
    };

    const init = () => {
      getDataList();
    };


    const reset = () => {
      state.tableLoading = false;
      state.loading = false;
      state.dataList = [];
      state.selectedRowKeys = [];
    };


    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          reset();
        }
      }
    );

    return {
      ...toRefs(state),
      title,
      onClose,
      onSubmit,
      rowSelection,
    };
  },
});
</script>

<style lang="less" scoped>
p {
  &:last-of-type {
    margin-bottom: 0;
  }
}
.user-tag :deep(.ant-tag) {
  border-radius: 20px !important;
  padding: 0 12px 0 0 !important;
  background: #f1f1f1;
  border: none;
}
</style>
